<template>
  <div class="container">
    <el-table :data="doctorFreeTimeList" style="width: 100%" height="600px">
      <el-table-column fixed prop="userId" label="工号" width="90" />
      <el-table-column prop="userName" label="医生" width="90" />
      <el-table-column
        prop="school"
        label="校区"
        width="90"
        sortable
        :filters="[
          { text: '屏峰', value: '屏峰' },
          { text: '朝晖', value: '朝晖' },
          { text: '莫干山', value: '莫干山' },
        ]"
        :filter-method="filterSchool"
      />
      <el-table-column prop="week" label="工作日" width="100" 
        sortable
        :filters="[
          { text: '周一', value: '1' },
          { text: '周二', value: '2' },
          { text: '周三', value: '3' },
          { text: '周四', value: '4' },
          { text: '周五', value: '5' },
        ]"
        :filter-method="filterWeek"
      />
      <el-table-column label="早上起止时间">
        <el-table-column prop="morningBegin" label="start" width="80" />
        <el-table-column prop="morningEnd" label="end" width="80" />
      </el-table-column>
      <el-table-column prop="moringOrderState" label="可预约" width="90" 
        :formatter="formatState1"
      />
      <el-table-column label="预约上午" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleClick1(scope.row)"
            >点击预约</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="下午起止时间">
        <el-table-column prop="afterBegin" label="start" width="80" />
        <el-table-column prop="afterEnd" label="end" width="80" />
      </el-table-column>
      <el-table-column prop="afterOrderState" label="可预约" width="90" :formatter="formatState2"/>
      
      <el-table-column label="预约下午" width="120">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleClick2(scope.row)" 
          
            >点击预约</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="预约信息">
      <el-form :model="setDoctorOrderform">
        <el-form-item label="学号" prop="studentId">
          <el-input v-model="setDoctorOrderform.studentId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="userId">
          <el-input v-model="setDoctorOrderform.userId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上午0|下午1" prop="reserveTime">
          <el-input v-model="setDoctorOrderform.reserveTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="距今时间" prop="reserveDay">
          <el-input v-model="setDoctorOrderform.reserveDay" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="订预约id" prop="reserveId">
          <el-input v-model="setDoctorOrderform.reserveId" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">再想想</el-button>
          <el-button type="primary" @click="submitDoctorOrderInfo">
              提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { baseUrl } from "@/utils/request";
import axios from "axios";
export default {
  data() {
    return {
      doctorFreeTimeList: null,
      dialogVisible: false,
      setDoctorOrderform:{
            studentId:'',  //学号
            userId:'',   //工号
            reserveTime:'',  //上午或者下午
            reserveDay:'',  // 距离时间
            reserveId:'',   // 订单id
      }
    };
  },
  created() {
    this.getDoctorFreeTime();
  },
  methods: {
    getDoctorFreeTime() { 
      axios({
        url: baseUrl + "/reserveTimeDoctor/list",
        method: "GET",
      }).then((res) => {
        this.doctorFreeTimeList = res.data.data;

        this.HandlerDoctorFreeTimeList();
      });
    },
    HandlerDoctorFreeTimeList() {
      this.doctorFreeTimeList.forEach((item) => {
        let leftmoringflag = item.number
          .substr(0, item.morningNumber)
          .includes("0");
        let leftafterflag = item.number
          .slice(item.morningNumber, -1)
          .includes("0");
        item["moringOrderState"] = leftmoringflag;
        item["afterOrderState"] = leftafterflag;
      });
      //打印调试信息
      //   console.log(this.doctorFreeTimeList)
    },
    filterSchool(value, row) {
      return row.school == value;
    },
    
    filterWeek(value, row) {
      return row.week == value;
    },
    formatState1 (row) {
      return row.moringOrderState === false ? '不可预约' : '可预约'
    },
    formatState2 (row) {
      return row.afterOrderState === false ? '不可预约' : '可预约'
    },
    handleClick1(row) {
      this.dialogVisible = true
      this.setDoctorOrderform.reserveTime = '0'
      this.setDoctorOrderform.userId = row.userId
      this.setDoctorOrderform.reserveId = row.reserveTimeId
      let today = new Date()
      today = today.getDay()
      let temp = parseInt(row.week)
      if(today>=temp){
          this.setDoctorOrderform.reserveDay = (temp + 7 - today)+''
      }else{
          this.setDoctorOrderform.reserveDay = (temp - today) + ''
      } 
    },
    handleClick2(row) {
      this.dialogVisible = true
      this.setDoctorOrderform.reserveTime = '1'
      this.setDoctorOrderform.userId = row.userId
      this.setDoctorOrderform.reserveId = row.reserveTimeId
      let today = new Date()
      today = today.getDay()
      let temp = parseInt(row.week)
      if(today>=temp){
          this.setDoctorOrderform.reserveDay = (temp + 7 - today)+''
      }else{
          this.setDoctorOrderform.reserveDay = (temp - today) + ''
      } 
    },
    submitDoctorOrderInfo(){
        axios.post(baseUrl + "/reserveTimeDoctor/setReserve",this.setDoctorOrderform)
        .then(res => {
            this.dialogVisible = false
            if(res.data.message=="操作成功"){
                setTimeout(() => {
                    alert("预约成功")    
                }, 800);
            }
        });
    }
  },
};
</script>

<style  scoped>
.container {
  text-align: center;
}
 
</style>